<template>
  <layout-content
    v-loading="uiState.loading"
    :header="$t('commons.form.detail')"
    :back-to="{ name: 'PersistentVolumes' }"
  >
    <div v-if="!query.yaml && detailsModel">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card class="el-card">
            <table style="width: 100%" class="desc-table">
              <tr>
                <th scope="col" align="left">
                  <h3>{{ $t("business.common.basic") }}</h3>
                </th>
                <th scope="col" />
              </tr>
              <tr>
                <td>
                  <el-text> {{ $t("commons.table.name") }}</el-text>
                </td>
                <td colspan="3">{{ detailsModel.metadata.name }}</td>
              </tr>
              <tr>
                <td>{{ $t("commons.table.status") }}</td>
                <td colspan="3">
                  <el-tag
                    v-if="detailsModel.status.phase === 'Bound'"
                    type="success"
                    size="small"
                  >
                    {{ detailsModel.status.phase }}
                  </el-tag>
                  <el-tag v-else type="info" size="small">
                    {{ detailsModel.status.phase }}
                  </el-tag>
                </td>
              </tr>
              <tr>
                <td>{{ $t("business.storage.capacity") }}</td>
                <td colspan="3">{{ detailsModel.spec.capacity.storage }}</td>
              </tr>
              <tr>
                <td>{{ $t("business.storage.accessModes") }}</td>
                <td colspan="3">
                  <div
                    v-for="(value, index) in detailsModel.spec.accessModes"
                    v-bind:key="index"
                    class="myTag"
                  >
                    <el-tag type="info" size="small">
                      {{ value }}
                    </el-tag>
                  </div>
                </td>
              </tr>
              <tr>
                <td>{{ $t("business.storage.storageClass") }}</td>
                <td colspan="3">{{ detailsModel.spec.storageClassName }}</td>
              </tr>
              <tr>
                <td>{{ $t("business.storage.reclaimPolicy") }}</td>
                <td colspan="3">
                  {{ detailsModel.spec.persistentVolumeReclaimPolicy }}
                </td>
              </tr>
              <tr>
                <td>{{ $t("commons.table.created_time") }}</td>
                <td colspan="">
                  {{ getAge(detailsModel.metadata.creationTimestamp) }}
                </td>
              </tr>
              <tr>
                <td>{{ $t("business.common.annotation") }}</td>
                <td colspan="3">
                  <div
                    v-for="(value, key, index) in detailsModel.metadata
                      .annotations"
                    v-bind:key="index"
                    class="myTag"
                  >
                    <el-tag v-if="value.length < 100" type="info" size="small">
                      {{ key }} = {{ value }}
                    </el-tag>
                    <el-tooltip
                      v-if="value.length > 100"
                      :content="value"
                      placement="top"
                    >
                      <el-tag
                        v-if="value.length >= 100"
                        type="info"
                        size="small"
                      >
                        {{ key }} = {{ value.substring(0, 100) + "..." }}
                      </el-tag>
                    </el-tooltip>
                  </div>
                </td>
              </tr>
            </table>
            <div class="bottom-button">
              <el-button @click="toggleYaml">
                {{ $t("commons.button.view_yaml") }}
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px" class="row-box" :gutter="10">
        <el-col :span="8">
          <el-card v-if="detailsModel.spec.claimRef !== undefined">
            <div class="card_title">
              <h3>{{ $t("business.storage.claim") }}</h3>
            </div>
            <table style="width: 100%" class="desc-table">
              <tr>
                <td>{{ $t("business.configuration.type") }}</td>
                <td colspan="3">{{ detailsModel.spec.claimRef.kind }}</td>
              </tr>
              <tr>
                <td>{{ $t("commons.table.name") }}</td>
                <td colspan="3">
                  <span
                    class="span-link"
                    @click="onShouldViewClaimDetails(detailsModel)"
                  >
                    {{ detailsModel.spec.claimRef.name }}
                  </span>
                </td>
              </tr>
              <tr>
                <td>{{ $t("business.namespace.namespace") }}</td>
                <td colspan="3">{{ detailsModel.spec.claimRef.namespace }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
        <el-col :span="16">
          <el-card v-if="'nfs' in detailsModel.spec">
            <div class="card_title">
              <h3>Network File System</h3>
            </div>
            <table style="width: 100%" class="myTable">
              <tr>
                <td>Server</td>
                <td colspan="3">{{ detailsModel.spec.nfs.server }}</td>
              </tr>
              <tr>
                <td>Path</td>
                <td colspan="3">{{ detailsModel.spec.nfs.path }}</td>
              </tr>
              <tr v-if="detailsModel.spec.nfs.readOnly">
                <td>Read Only</td>
                <td colspan="3">{{ detailsModel.spec.nfs.readOnly }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <div v-if="query.yaml">
        <yaml-editor :value="yamlDetailsModel" :read-only="true" />
        <div class="bottom-button">
          <el-button @click="toggleYaml">{{
            $t("commons.button.back_detail")
          }}</el-button>
        </div>
      </div>
    </el-row>
  </layout-content>
</template>

<script setup lang="ts">
import { PersistentVolume, useK8SApi } from "@/views/domain/kubeHud/api/k8s";
import { useBaseDetailsProvider } from "@/views/domain/kubeHud/api/provider/baseDetailsProvider";
import LayoutContent from "@/views/domain/kubeHud/views/components/layout/LayoutContent.vue";
import YamlEditor from "@/views/domain/kubeHud/views/components/yaml-editor/index.vue";
import { encodeToBase64, decodeFromBase64 } from "@/utils/text";
import { getAge } from "@/views/domain/kubeHud/utils";
import { useVerifyRouter } from "@/router/use";
import { useBaseCRUDRoute } from "@/views/domain/kubeHud/api/provider/baseListProvider";
import { KRoutePVC } from "@/views/domain/kubeHud/router";

// import { isJSON } from "@/utils/data";
// import { getPv } from "@/api/pv";

const { pvRepo } = useK8SApi();
const {
  detailsModel,
  uiState,
  query,
  router,
  reloadDetails,
  reloadQuery,
  toggleYaml,
  yamlDetailsModel
} = useBaseDetailsProvider(
  {
    getDetailsReq: pvRepo.getPVDetail
  },
  true
);

const { pushTo } = useBaseCRUDRoute({ router });

const onShouldViewClaimDetails = (row: PersistentVolume) => {
  pushTo(KRoutePVC.Details, {
    name: row.spec.claimRef.name,
    namespace: row.spec.claimRef.namespace
  });
};
</script>

<style scoped lang="scss">
.desc-table {
  tr {
    td:first-child {
      --el-text-font-size: var(--el-font-size-base);
      --el-text-color: var(--el-text-color-regular);
      align-self: center;
      color: var(--el-text-color);
      font-size: var(--el-text-font-size);
      margin: 0;
      overflow-wrap: break-word;
      padding: 0;
    }
  }
}
</style>
